<template>
	<!-- 商品图片、视频 -->
	<view class="good-video-img" id="good" :style="{ height: height + 'rpx' }">
		<swiper
			class="good-video-img"
			:style="{ height: height + 'rpx' }"
			:disable-touch="disableTouch"
			:current="currentVideoImgIndex"
			@change="changeVideoImg"
			:circular="true"
			:autoplay="autoplayVideoImage"
		>
			<swiper-item v-if="goodsDetail.video">
				<view class="play-box">
					<view class="bg-gray image-box" :hidden="hiddenVideoCover">
						<image
							class="play"
							src="/static/icon-play.png"
							@tap.stop="playVideo"
							mode="scaleToFill"
						></image>
						<image
							class="video-img"
							:src="$mUtils.qiniu(goodsDetail.video_cover)"
							mode="scaleToFill"
						></image>
					</view>
					<video
						controls
						class="video"
						id="goodsVideo"
						:hidden="!hiddenVideoCover"
						:src="$mUtils.qiniu(goodsDetail.video, 750, 'video')"
						@error="videoErrorCallback"
						@pause="pauseVideo"
						@ended="pauseVideo"
						@play="playVideo"
					></video>
				</view>
			</swiper-item>
			<swiper-item v-for="(item, index) in banners" :key="index">
				<view class="bg-gray image-box" @tap.stop="previewImage(banners, index)">
					<image
						class="good-image"
						:src="$mUtils.qiniu(item.url)"
						mode="aspectFill"
						lazy-load
						:show-menu-by-longpress="true"
					></image>
				</view>
			</swiper-item>
		</swiper>
		<block v-if="goodsDetail.video">
			<block v-if="currentVideoImgIndex > 0">
				<view class="swiper-num round">{{ currentVideoImgIndex }} / {{ banners.length }}</view>
			</block>
		</block>
		<block v-else>
			<view class="swiper-num round">{{ currentVideoImgIndex + 1 }} / {{ banners.length }}</view>
		</block>
		<block v-if="!hiddenVideoCover">
			<view class="tabs-select" v-if="goodsDetail.video">
				<view
					class="tab-item"
					:class="currentVideoImgIndex == 0 ? 'bg-gradual-purple' : ''"
					@tap.stop="selectVideoImg('video')"
				>
					视频
				</view>
				<view
					class="tab-item"
					:class="currentVideoImgIndex != 0 ? 'bg-gradual-purple' : ''"
					@tap.stop="selectVideoImg('image')"
				>
					图片
				</view>
			</view>
			<view class="tabs-select" v-if="!goodsDetail.video">
				<view class="tab-item bg-gradual-purple">图片</view>
			</view>
		</block>
	</view>
</template>

<script setup lang="ts">
import $mUtils from '@/common/utils'

const props = defineProps({
	goodsDetail: {
		type: Object,
		default: () => {
			return {}
		}
	},
	height: {
		type: Number,
		default: 540
	}
})

let videoContext: any = null // 视频容器
let { proxy } = getCurrentInstance() as any
const currentVideoImgIndex = ref<number>(0)
const autoplayVideoImage = ref<boolean>(true) // 自动播放
const banners = ref<Array<any>>([]) // 商品banners图片
const hiddenVideoCover = ref<boolean>(false)
const disableTouch = ref<boolean>(false)

/**
 * 初始化数据
 */
function initData() {
	banners.value = props.goodsDetail?.goods_image?.length > 0 ? props.goodsDetail.goods_image : []

	videoContext = uni.createVideoContext('goodsVideo', proxy)
}
// 预览商品店铺评价图片
function previewImage(lists: Array<any>, current: number) {
	let urls = lists.map(item => {
		return $mUtils.qiniu(item.url)
	})
	uni.previewImage({
		current,
		urls
	})
}
// 视频和图片切换
function changeVideoImg(e: { detail: any }) {
	let { current, source } = e.detail
	if (source === 'autoplay' || source === 'touch') {
		currentVideoImgIndex.value = current
	}
}
// 视频和图片切换
function selectVideoImg(key: string) {
	if (key == 'video') {
		currentVideoImgIndex.value = 0
	} else {
		currentVideoImgIndex.value = 1
	}
}
// 视频播放失败
function videoErrorCallback(e: any) {
	$mUtils.tip(e.detail.errMsg || '视频播放失败')
}
// 视频播放
function playVideo() {
	videoContext.play()
	hiddenVideoCover.value = true
	autoplayVideoImage.value = false
}
// 视频暂停
function pauseVideo() {
	videoContext.pause()
	hiddenVideoCover.value = false
	autoplayVideoImage.value = true
}

watch(
	() => props.goodsDetail,
	() => initData(),
	{ deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.good-video-img {
	position: relative;
	height: 540rpx;
	.play-box,
	.image-box {
		position: relative;
		height: 100%;
		.video-img,
		.good-image {
			width: 100%;
			height: 100%;
			z-index: 3;
		}

		.play {
			position: absolute;
			transform: translate(-50%, -50%);
			left: 50%;
			top: 50%;
			width: 100rpx;
			height: 100rpx;
			z-index: 4;
		}
		.video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}
	}
	.swiper-num {
		position: absolute;
		bottom: 30rpx;
		right: 24rpx;
		font-size: 24rpx;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 12rpx 28rpx;
		line-height: 1;
		z-index: 8;
	}
	.tabs-select {
		position: absolute;
		right: 0;
		left: 50%;
		z-index: 8;
		bottom: 30rpx;
		font-size: 0;
		text-align: center;
		transform: translateX(-50%);
		.tab-item {
			display: inline-block;
			width: 90rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #ffffff;
			font-size: 24rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			&:last-child {
				margin-right: 0;
			}
		}
	}
}
</style>
